<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
	</head>

	<body>
		<!--<canvas height="900px" width="800px" id="page1"></canvas>
		<script>
			$("#page1").load("66.html")
		</script>-->

		<canvas id="canvas" width="800" height="500" style="background-color:#ead3d3">

    </canvas>

		<div id="page1" style="border:2px solid groove;position:absolute;left:0px;top:0px;opacity:.5"></div>
		<script>
			$("#page1").load("66.html");
			
			function drawArrow(ctx, fromX, fromY, toX, toY,theta,headlen,width,color) {
			  var theta = theta || 30,
			      headlen = headlen || 10,
			      width = width || 1,
			      color = color || '#000',
			      angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
			      angle1 = (angle + theta) * Math.PI / 180,
			      angle2 = (angle - theta) * Math.PI / 180,
			      topX = headlen * Math.cos(angle1),
			      topY = headlen * Math.sin(angle1),
			      botX = headlen * Math.cos(angle2),
			      botY = headlen * Math.sin(angle2);
			  ctx.save();
			  ctx.beginPath();
			  var arrowX, arrowY;
			  ctx.moveTo(fromX, fromY);
			  ctx.lineTo(toX, toY);
			  arrowX = toX + topX;
			  arrowY = toY + topY;
			  ctx.moveTo(arrowX, arrowY);
			  ctx.lineTo(toX, toY);
			  arrowX = toX + botX;
			  arrowY = toY + botY;
			  ctx.lineTo(arrowX, arrowY);
			  ctx.strokeStyle = color;
			  ctx.lineWidth = width;
			  ctx.stroke();
			  ctx.restore();
			}

			var can = document.getElementById('canvas');
			var ctx = can.getContext('2d');
			
			drawArrow(ctx, 110,50, 200,80,15,15,2,'#f36');			
			drawArrow(ctx, 110,120, 200,80,15,15,2,'#f36');
			drawArrow(ctx, 110,190, 200,80,15,15,2,'#f36');
			drawArrow(ctx, 110,450, 360,360,15,15,2,'#f36');
			
			drawArrow(ctx, 275,185, 365,115,15,15,2,'#f36');
		</script>
	</body>

</html>